<template>
  <div class="container">
    <div class="w1300 flex flex-xbt">
      <div class="main">
        <div class="a back flex-yc" @click="$router.go(-1)">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </div>
        <div class="el-avatar-wrap flex-yc flex-xbt">
          <div class="flex-yc avatar-wrap">
            <img
              src=""
              class="el-avatar"
              @click="$router.push('/forum/user')"
            />
            <span class="username">张三疯</span>
          </div>
          <more-com :options="['举报', '删除']" @onClickOption="onClickOption">
            <el-icon class="a active"><MoreFilled /></el-icon>
          </more-com>
        </div>

        <div class="question-wrap flex-yc">
          <div
            class="question-item flex-yc"
            :class="{ active: i === 1 }"
            v-for="i in 2"
          >
            <p>
              悬赏:
              <span>10</span>
              佰茵币
            </p>
            <el-button v-if="i === 1" type="danger" size="small">
              我来回答
            </el-button>
            <p v-else>已解决</p>
          </div>
        </div>
        <article-com :article="article"></article-com>
        <div class="bast-answer-wrap">
          <h3>最佳答案</h3>
          <div class="el-avatar-wrap flex-yc">
            <img src="" class="el-avatar" />
            <span class="username">张三疯</span>
          </div>
          <p class="con">
            随着我们不断长大，大脑的前额皮质开始发育，理智脑的战斗力才慢慢增强。不过理智脑的战斗力其实表现在两方面：一方面是侧重学习、理解、记忆、运算的认知能力，即我们在校学习时主要锻炼的部分，另一方面则是侧重观察、反思、判断、选择的元认知能力。
          </p>

          <div class="con flex-xbt">
            <div class="download-wrap flex-y">
              <el-link>
                <el-icon class="el-icon--left"><Link /></el-icon>
                www.baidu.com
              </el-link>
              <el-link>附件下载：文件压缩包名称.zip</el-link>
            </div>
            <div class="flex-yc">
              <span class="a iconfont-wrap">
                <i class="iconfont icon-comment fz"></i>
                33
              </span>
              <span class="a iconfont-wrap">
                <i class="iconfont icon-like"></i>
                33
              </span>
            </div>
          </div>
        </div>
        <div class="a click-like">
          <i class="iconfont icon-like"></i>
          <span>1234</span>
        </div>

        <div class="user-question-input-wrap">
          <img src="" class="el-avatar" />
          <div class="user-question-input">
            <el-input
              class="not-shadow"
              type="textarea"
              placeholder="请输入内容"
              rows="4"
              resize="none"
            ></el-input>
            <div class="handle-wrap flex-xbt">
              <div class="handle-icon-wrap">
                <i class="iconfont icon-tupian"></i>
                <i class="iconfont icon-lianjie"></i>
                <i class="iconfont icon-wenjian"></i>
              </div>
              <div class="btn-group">
                <el-button type="primary">回复</el-button>
                <el-button type="info">取消</el-button>
              </div>
            </div>
          </div>
        </div>

        <div class="user-comment-wrap">
          <h3>
            评论
            <span>32</span>
          </h3>
          <comment-com
            :commentData="item"
            v-for="item in comment"
            :key="item.userId"
          >
            <comment-com
              :isChild="true"
              :commentData="child"
              v-for="child in item.child"
              :key="child.userId"
            ></comment-com>
          </comment-com>
        </div>
      </div>
      <user-right-hot></user-right-hot>
    </div>
  </div>
</template>

<script setup lang="ts">
import MoreCom from '@/pages/forum/components/MoreCom.vue'
import UserRightHot from '@/pages/forum/views/index/components/UserRightHot.vue'
import CommentCom from '@/pages/forum/components/CommentCom.vue'
import ArticleCom from '@/pages/forum/components/ArticleCom.vue'
import { ElInput } from 'element-plus'
import { reactive } from 'vue'
import { commendContent } from '@/pages/forum/types/comment.ts'
import { articleType } from '@/pages/forum/types/article.ts'

const article = reactive<articleType>({
  id: 1,
  tag: '【思路分享】',
  title: '活了？scBasePipeline2.2报错',
  content:
    '随着我们不断长大，大脑的前额皮质开始发育，理智脑的战斗力才慢慢增强。不过理智脑的战斗力其实表现在两方面：一方面是侧重学习、理解、记忆、运算的认知能力，即我们在校学习时主要锻炼的部分，另一方面则是侧重观察、反思、判断、选择的元认知能力。',
  commentTime: '2023-02-26 13:26:30',
})

const comment = reactive<commendContent[]>([
  {
    userId: 1,
    username: '张武级',
    userAvatar: '',
    content:
      '习近平总书记指出，宣传思想文化工作事关党的前途命运，事关国家长治久安，事关民族凝聚力和向心力，是一项极端重要的工作。回望2023年，宣传思想文化战线牢记总书记嘱托，高擎习近平文化思想旗帜，自觉担负起新的文化使命。一年来，围绕贯彻党的二十大关于文化建设的战略部署，强化思想引领，不断守正创新，大力唱响强信心的主旋律，为党和国家事业发展提供了坚强思想保证、强大精神力量、有利文化条件。',
    commentSum: 30,
    commentLikeSum: 32,
    commentTime: '2023-12-12 18:18:18',
    child: [
      {
        userId: 1,
        username: '张武级',
        userAvatar: '',
        content:
          '习近平总书记指出，宣传思想文化工作事关党的前途命运，事关国家长治久安，事关民族凝聚力和向心力，是一项极端重要的工作。回望2023年，宣传思想文化战线牢记总书记嘱托，高擎习近平文化思想旗帜，自觉担负起新的文化使命。一年来，围绕贯彻党的二十大关于文化建设的战略部署，强化思想引领，不断守正创新，大力唱响强信心的主旋律，为党和国家事业发展提供了坚强思想保证、强大精神力量、有利文化条件。',
        commentSum: 30,
        commentLikeSum: 32,
        commentTime: '2023-12-12 18:18:18',
      },
      {
        userId: 1,
        username: '张武级',
        userAvatar: '',
        content:
          '习近平总书记指出，宣传思想文化工作事关党的前途命运，事关国家长治久安，事关民族凝聚力和向心力，是一项极端重要的工作。回望2023年，宣传思想文化战线牢记总书记嘱托，高擎习近平文化思想旗帜，自觉担负起新的文化使命。一年来，围绕贯彻党的二十大关于文化建设的战略部署，强化思想引领，不断守正创新，大力唱响强信心的主旋律，为党和国家事业发展提供了坚强思想保证、强大精神力量、有利文化条件。',
        commentSum: 30,
        commentLikeSum: 32,
        commentTime: '2023-12-12 18:18:18',
      },
    ],
  },
  {
    userId: 1,
    username: '张武级',
    userAvatar: '',
    content:
      '习近平总书记指出，宣传思想文化工作事关党的前途命运，事关国家长治久安，事关民族凝聚力和向心力，是一项极端重要的工作。回望2023年，宣传思想文化战线牢记总书记嘱托，高擎习近平文化思想旗帜，自觉担负起新的文化使命。一年来，围绕贯彻党的二十大关于文化建设的战略部署，强化思想引领，不断守正创新，大力唱响强信心的主旋律，为党和国家事业发展提供了坚强思想保证、强大精神力量、有利文化条件。',
    commentSum: 30,
    commentLikeSum: 32,
    commentTime: '2023-12-12 18:18:18',
    child: [
      {
        userId: 1,
        username: '张武级',
        userAvatar: '',
        content:
          '习近平总书记指出，宣传思想文化工作事关党的前途命运，事关国家长治久安，事关民族凝聚力和向心力，是一项极端重要的工作。回望2023年，宣传思想文化战线牢记总书记嘱托，高擎习近平文化思想旗帜，自觉担负起新的文化使命。一年来，围绕贯彻党的二十大关于文化建设的战略部署，强化思想引领，不断守正创新，大力唱响强信心的主旋律，为党和国家事业发展提供了坚强思想保证、强大精神力量、有利文化条件。',
        commentSum: 30,
        commentLikeSum: 32,
        commentTime: '2023-12-12 18:18:18',
      },
      {
        userId: 1,
        username: '张武级',
        userAvatar: '',
        content:
          '习近平总书记指出，宣传思想文化工作事关党的前途命运，事关国家长治久安，事关民族凝聚力和向心力，是一项极端重要的工作。回望2023年，宣传思想文化战线牢记总书记嘱托，高擎习近平文化思想旗帜，自觉担负起新的文化使命。一年来，围绕贯彻党的二十大关于文化建设的战略部署，强化思想引领，不断守正创新，大力唱响强信心的主旋律，为党和国家事业发展提供了坚强思想保证、强大精神力量、有利文化条件。',
        commentSum: 30,
        commentLikeSum: 32,
        commentTime: '2023-12-12 18:18:18',
      },
    ],
  },
])
</script>

<style scoped lang="scss">
.container {
  padding-top: 18px;
  overflow: hidden;
  background-color: #f7f8fa;

  .w1300 {
    margin-bottom: 50px;

    .main {
      width: 1064px;
      padding: 24px 38px;
      background-color: #fff;
    }

    .back {
      font-size: 18px;
      font-weight: 400;
      color: #333;

      &:hover {
        color: $primary;
      }
    }

    .con-title {
      font-size: 16px;
      font-weight: 500;
      color: #191b1f;

      b {
        color: $primary;
      }
    }

    p.con {
      margin: 8px 0;
      margin-top: 15px;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: #191b1f;
    }

    .el-avatar-wrap {
      margin-top: 26px;
      margin-bottom: 15px;
      font-size: 14px;
      color: #333;

      .el-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
      }

      .username {
        padding: 0 5px;
        font-weight: 500;
      }
    }

    .question-wrap {
      flex-wrap: wrap;
      margin-bottom: 36px;

      .question-item {
        justify-content: space-between;
        width: 392px;
        height: 70px;
        padding: 5px 15px 9px 5px;
        background-color: rgb(217 217 217 / 10%);
        border: 1px dashed #d9d9d9;
        border-radius: 4px;

        > p {
          font-size: 14px;
          color: #a3a3a3;

          span {
            font-size: 40px;
          }
        }

        &.active {
          background-color: rgb(58 172 227 / 10%);
          border-color: $primary;

          p {
            color: $primary;
          }
        }

        & + .question-item {
          margin-left: 45px;
        }
      }
    }

    .iconfont-wrap {
      margin-top: 20px;
      font-size: 12px;
      color: #8691a3;

      i {
        font-size: 12px;
      }

      & + .iconfont-wrap {
        margin-left: 20px;
      }
    }

    .bast-answer-wrap {
      padding: 14px 20px;
      margin-top: 30px;
      background-color: #ebf6fc;
      border: 1px dashed $primary;

      h3 {
        font-size: 14px;
        font-weight: 500;
        color: $primary;
      }
    }

    .download-wrap {
      align-items: flex-start;

      a {
        margin-top: 5px;
        color: #3c78fe;
      }
    }

    .click-like {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 109px;
      padding: 11px 40px;
      margin: 35px auto;
      font-size: 12px;
      color: $primary;
      background-color: #f7efef;
      border-radius: 50px;

      i {
        margin-bottom: 5px;
        font-size: 18px;
      }
    }

    .user-question-input-wrap {
      display: flex;

      > img {
        flex-shrink: 0;
        width: 46px;
        height: 46px;
        margin-right: 9px;
        border-radius: 50%;
      }

      .user-question-input {
        flex: 1;
        border: 1px solid $primary;
        border-radius: 4px;
      }

      .handle-wrap {
        align-items: self-end;
        padding: 10px 20px;
      }

      .handle-icon-wrap {
        font-size: 20px;
        color: $primary;

        i {
          cursor: pointer;
        }

        i + i {
          margin-left: 30px;
        }
      }
    }

    .user-comment-wrap {
      padding: 43px 38px;

      > h3 {
        font-size: 20px;
        color: #333;

        span {
          margin-left: 5px;
          color: #888;
        }
      }
    }
  }
}
</style>
